import React, { useEffect, useState } from "react";
import { Drawer, Button } from "antd";
import _ from "lodash";
import { CheckOutlined, RollbackOutlined } from "@ant-design/icons";
import { useInitData } from "./use-events";
import { useScemaRender } from "../utils";
import { MetaSorted } from "schema-form";
import { IFormProps } from "@formily/core/esm/types";
import { ISchemaFieldFactoryOptions } from "@formily/react";
import { formatForArrayTable } from "@/components/schema-form-render/utils";
import { SchemaFormContent } from "@/components/schema-form-render/components/schema-form-content";
import ContentSlot from "@/components/schema-form-render/components/schema-form-content/content-solot";
import { getValidateMessage } from "@/utils/validate-rules/message";
interface DrawerFormProps {
  editData?: any;
  loading: boolean;
  title: string;
  visible: boolean;
  onCancel: () => any;
  onOk?: (values: any, cb: any) => any;
  modalMetasConfig?: MetaSorted;
  filedConfig?: ISchemaFieldFactoryOptions;
  formConfigs?: IFormProps;
  needFormat?: boolean;
  width?: number;
  type?: any;
  eventMap?: any;
  needTableArray?: boolean;
  noOk?: boolean;
}
const DrawerForm = ({
  editData,
  loading,
  title,
  visible,
  onCancel,
  onOk,
  modalMetasConfig,
  filedConfig,
  formConfigs,
  needFormat = true,
  needTableArray = false,
  width = 900,
  type = "NORAML",
  eventMap,
  noOk = false
}: DrawerFormProps) => {
  const [value, setValue] = useState<null | any>(null);
  const [fg, setfg] = useState<any>(false);
  const { form, SchemaFormRender } = useScemaRender(
    filedConfig,
    formConfigs,
    "",
    true,
    [fg, visible]
  );
  useEffect(() => {
    if (value === null && editData) {
      // bug 修复
      // setTimeout(() => {
      setValue(editData);
      form?.setValues({
        ...editData,
      });
      // }, 250)
    }
    if (!editData) {
      setValue(null);
      form?.reset();
    }
    return () => {
      setValue(null);
    };
  }, [JSON.stringify(editData)]);
  let meta: any = _.cloneDeep(modalMetasConfig);
  const cancel = () => {
    setValue(null);
    form?.reset();
    onCancel();
    setfg(!fg);
  };
  const resetForm = () => {
    setValue(null);
    form?.reset();
    // 防止时间差~~
    setfg(!fg);
    setTimeout(() => {
      setfg(!fg);
    }, 250);
  };
  const footer = () => {
    return (
      <ContentSlot
        left={
          <Button icon={<RollbackOutlined />} onClick={cancel}>
            {getValidateMessage("task.rule.button.back", true)}
          </Button>
        }
        right={
          !noOk ? (<Button
            type="primary"
            loading={loading}
            icon={<CheckOutlined />}
            onClick={() => {
              form.submit().then((val: any) => {
                const values = form.values;
                onOk &&
                  onOk(values, () => {
                    resetForm();
                  });
              });
            }}
          >
            {getValidateMessage("common.submit", true)}
          </Button>) : null
        }
      />
    );
  };
  useEffect(() => {
    if (needFormat) {
      meta = useInitData(meta, null, type, false, eventMap || {});
    }
  }, [JSON.stringify(meta)]);
  return (
    <Drawer
      title={title}
      visible={visible}
      onClose={cancel}
      destroyOnClose
      maskClosable={false}
      width={width}
    >
      <SchemaFormContent footer={footer()}>
        {meta?.schema && (
          <SchemaFormRender
            schema={meta?.schema}
            pageConfig={meta?.pageConfig}
          />
        )}
      </SchemaFormContent>
    </Drawer>
  );
};

export default DrawerForm;
